<template>
  <div>
    <!--搜索栏-->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.title" placeholder="标题"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
      </el-form-item>
<!--      <el-form-item>-->
<!--        <el-button size="small" type="success" icon="el-icon-search" @click="handleAdd">添加</el-button>-->
<!--      </el-form-item>-->
    </el-form>

    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
              element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column  align="center"  sortable prop="title" label="标题"></el-table-column>
      <el-table-column  align="center"  sortable prop="content" label="正文" :formatter="formatContent"></el-table-column>
      <el-table-column align="center" sortable prop="noticeStatus" label="阅读状态">
        <template slot-scope="scope">
          <el-popover
            placement="top"
            width="100"
            trigger="hover"
            :content="getStatusTip(scope.row.noticeStatus)"
          >
            <div slot="reference">
              <el-tag
                :type="getTagType(scope.row.noticeStatus)"
                size="medium"
                effect="plain"
              >
                {{ getReadStatus(scope.row.noticeStatus) }}
              </el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column  align="center"  sortable prop="createrName" label="发布人"></el-table-column>
      <el-table-column  align="center"  sortable prop="createTime" label="发布时间"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
          <el-button size="mini" type="danger" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="50%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title" readonly></el-input>
        </el-form-item>
        <el-form-item label="正文" prop="content">
          <el-input v-model="editForm.content" type="textarea" rows="10" readonly></el-input>
        </el-form-item>
      </el-form>
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button size="small" @click="closeDialog">取消</el-button>-->
<!--        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">提交-->
<!--        </el-button>-->
<!--      </div>-->
    </el-dialog>
  </div>
</template>

<script>
import * as api from '../../api/interface'
import Pagination from '../../components/Pagination'

export default {
  data() {
    return {
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '',
      editForm: {},  //
      userId: "",
      userName: "",
      // rules表单验证
      rules: {
        title: [{required: true, message: '请输入标题', trigger: 'blur'}],
        content: [{required: true, message: '请输入正文', trigger: 'blur'}],
      },
      //查询条件
      formInline: {
        page: 1, //当前页面
        limit: 10, //每页数量
        userName: '',
        userType: ''
      },
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },
      userTypes: [
        {value: "1", label: "管理员"},
        {value: "2", label: "店主"},
      ],
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 页面初始化方法
   */
  created() {
    this.userId = localStorage.getItem("userId");
    this.userName = localStorage.getItem("userName");
    this.getData()
  },
  methods: {
    formatContent: function (row, column) {
      return row.content && row.content.length > 10 ? row.content.substring(0, 10) + "..." : row.content;
    },
    formatStatus: function (row, column) {
      return row.noticeStatus == '0' ? "未读" :
        row.noticeStatus == "1" ? "已读" :
                  "未知";
    },
    // 获取标签类型
    getTagType(status) {
      const typeMap = {
        '0': 'danger',  // 未读
        '1': 'success'  // 已读
      }
      return typeMap[status] || 'info'
    },

    // 获取阅读状态文本
    getReadStatus(status) {
      const statusMap = {
        '0': '未读',
        '1': '已读'
      }
      return statusMap[status] || '未知'
    },

    // 获取提示文本
    getStatusTip(status) {
      const tipMap = {
        '0': '消息尚未阅读',
        '1': '消息已阅读'
      }
      return tipMap[status] || '状态未知'
    },
    // 获取列表数据，查找数据的页面的方法
    getData() {
      this.loading = true
      let para = {       //声明变量 para，let--string
        current: this.formInline.page,
        size: this.formInline.limit,
        title: this.formInline.title,
      }
      para.userId = this.userId
      api.queryNoticeUserByPage(para).then(data => {   //.then--回调参数，回调后台，result给data
        this.logining = false;
        if (data.message != "success") {
          this.logining = false;
          this.$message.error(data.message)
        } else {
          this.loading = false
          this.listData = data.returnPage.records
          this.pageparm.currentPage = data.returnPage.current
          this.pageparm.pageSize = data.returnPage.size
          this.pageparm.total = data.returnPage.total
        }
      }).catch(e => {
        this.logining = false;
      });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getData()
    },
    //显示添加界面
    handleAdd: function (index, row) {
      this.editFormVisible = true
      this.title = '新增'
      this.editForm = {}
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.editForm = row
      this.editForm.noticeStatus = '1'
      api.updateNoticeUser(this.editForm).then(data => {});
      this.editFormVisible = true
      this.title = '查看通知'
    },
    // 关闭编辑
    closeDialog() {
      this.editFormVisible = false
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          let para = Object.assign({}, this.editForm);
          para.createrId = this.userId
          para.createrName = this.userName
          this.loading = true;
          api.updateNoticeUser(para)
            .then(res => {
              this.loading = false;
              if (res.message == 'success') {
                this.$message({message: "提交成功", type: "success"}); //弹出修改成功
                this.getData();
                this.editFormVisible = false;
              } else {
                this.$message({type: 'error', message: res.message})
              }
            })
            .catch(e => {
              // this.editFormVisible = false
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
    // 删除
    handleDel(index, row) {
      this.$confirm('确定要删除吗?', '信息', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'})
        .then(() => {
          let para = {
            noticeUserId: row.noticeUserId
          }  //设置传参的userId
          api.delNoticeUser(para)
            .then(res => {
              if (res.message == 'success') {
                this.$message({message: "删除成功", type: "success"});
                this.getData();//删掉之后在调用查询再查一遍
              } else {
                this.$message({type: 'error', message: res.message})
              }
            })
            .catch(e => {
              this.loading = false
            })
        });
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
/* 标签样式优化 */
.el-tag {
  padding: 0 12px;
  height: 28px;
  line-height: 26px;
  border-radius: 4px;
  font-weight: 500;
}

/* 未读状态 */
.el-tag--danger {
  background-color: #fef0f0;
  border-color: #fbc4c4;
  color: #f56c6c;
}

/* 已读状态 */
.el-tag--success {
  background-color: #f0f9eb;
  border-color: #c2e7b0;
  color: #67c23a;
}

/* 未知状态 */
.el-tag--info {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
}

/* 鼠标悬停效果 */
.el-tag:hover {
  opacity: 0.8;
  cursor: pointer;
}

/* popover 样式调整 */
.el-popover {
  min-width: 100px;
  padding: 8px;
  font-size: 12px;
  line-height: 1.4;
}
</style>
